<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/application/timeline.css">
	
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/sly.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/sly-plugins.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/pages/timeline.js"></script>

<div id="bigmap"></div>

<div class="timeline" id="main-timeline">
	<div class="frame" id="years-frame">
		<ul class="years slidee">
			<!-- Loading years -->
		</ul>
	</div>
	<div id="y-scrollbar" class="scrollbar">
		<div class="handle">
			<div class="mousearea"></div>
		</div>
	</div>

	<div class="frame" id="centuries-frame">
		<ul class="centuries slidee">
			<!-- Loading decades -->
		</ul>
	</div>
	<div id="c-scrollbar" class="scrollbar">
		<div class="handle">
			<div class="mousearea"></div>
		</div>
	</div>

	<div class="range"></div>
</div>

<div class="custom-time">
	<div type="button" class="button btn btn-default" data-toggle="modal" data-target="#time-popup"
	data-placement="top" title="Tra cứu tùy chọn">
		<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
	</div>

	<div class="modal fade" id="time-popup" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content modal-info">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title" id="myModalLabel">TRA CỨU TÙY CHỌN</h4>
				</div>
				
				<form action="" name="timeFrm" class="timeFrm" ng-submit="setRangeTime()">
				<div class="modal-body">
					<div class="row">
						<div class="col-xs-6">
							<p class="text-right">Từ năm:</p>
							<input class="form-control" type="number" name="frYear" ng-model="option.frYear" required>
							<p class="error">
								<span ng-show="timeFrm.frYear.$error.number">Chỉ nhập số</span> 
								<span ng-show="timeFrm.frYear.$error.required && timeFrm.frYear.$dirty">Không bỏ trống</span> 
							</p>
						</div>
						<div class="col-xs-6">
							<p class="text-right">Đến năm:</p>
							<input class="form-control" type="number" name="toYear" ng-model="option.toYear" required>
							<p class="error">
								<span ng-show="timeFrm.toYear.$error.number">Chỉ nhập số</span>
								<span ng-show="timeFrm.toYear.$error.required && timeFrm.toYear.$dirty">Không bỏ trống</span>
							</p>
						</div>
					</div>
					<div class="row" ng-show="region == 'wo'">
						<div class="col-xs-12">
							<p class="text-right">Tùy chọn: tra cứu theo quốc gia</p>
						</div>
						<div class="col-xs-12">
							<select class="form-control" name="national" id="" 
								ng-model="filterNation" ng-options="nation.name for nation in listNations">
								<option value="">Chọn quốc gia (hoặc bỏ trống)</option>
							</select>
						</div>
					</div>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
					<button type="submit" class="btn btn-primary" name="getMap">Tra cứu</button>
				</div>
				</form>

			</div>
		</div>
	</div>

	<div class="modal fade alert" id="time-form-alert" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content modal-info">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title" id="myModalLabel">LỖI</h4>
				</div>
				
				<div class="modal-body">
					<p class="message">Ngày bắt đầu phải nhỏ hơn ngày kết thúc</p>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
				</div>
			</div>
		</div>
	</div> <!-- Alert modal -->
</div>

<div class="event-list">
	<!-- Load list event by timeline -->
	<h2 class="titl">DANH SÁCH SỰ KIỆN</h2>
	<ul class="list">
		<li ng-click="viewMap('all')">
			<p class="region">All</p>
			<p class="name">Xem tất cả</p>
			<p class="time"></p>
		</li>
		<li ng-repeat="event in events | eventTime:curCentury:curYear:option:filterNation" ng-click="viewMap(event._id.$id)">
			<p class="region {{event.type | lowercase}}">
				{{event.type}}
			</p>
			<p class="name">{{event.eventName}}</p>
			<p class="time">{{event.time}}</p>
			<p class="link">
				<a href="#/event/{{event._id.$id}}"><span class="glyphicon glyphicon-tags"></span> &nbsp; Những bài học liên quan</a>
			</p>
		</li>
	</ul>
</div>